<template>
  <div class="rehabilitation-page">
    <van-nav-bar :title="$t('rehabilitation.title')" left-arrow @click-left="onClickLeft" />

    <div class="rehabilitation-content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('rehabilitation.finishedText')"
          @load="onLoad">
          <div class="plan-card" v-for="plan in plans" :key="plan.id">
            <van-cell-group inset>
              <van-cell :title="plan.title" :label="plan.description" />
              <van-cell :title="$t('rehabilitation.progress')">
                <template #value>
                  <van-progress :percentage="plan.progress" />
                </template>
              </van-cell>
              <van-cell :title="$t('rehabilitation.notes')" :value="plan.notes" />
              <van-cell>
                <template #value>
                  <van-button size="small" type="primary" @click="completeExercise(plan.id)">
                    {{ $t('rehabilitation.complete') }}
                  </van-button>
                </template>
              </van-cell>
            </van-cell-group>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

interface Plan {
  id: number
  title: string
  description: string
  progress: number
  notes: string
}

const plans = ref<Plan[]>([
  {
    id: 1,
    title: t('rehabilitation.upperLimb'),
    description: t('rehabilitation.upperLimbDesc'),
    progress: 60,
    notes: t('rehabilitation.upperLimbNotes')
  },
  {
    id: 2,
    title: t('rehabilitation.lowerLimb'),
    description: t('rehabilitation.lowerLimbDesc'),
    progress: 30,
    notes: t('rehabilitation.lowerLimbNotes')
  }
])

const onClickLeft = () => {
  router.back()
}

const onLoad = () => {
  // 模拟加载更多数据
  setTimeout(() => {
    loading.value = false
    finished.value = true
  }, 1000)
}

const onRefresh = () => {
  // 模拟刷新数据
  setTimeout(() => {
    refreshing.value = false
    showToast(t('rehabilitation.refreshSuccess'))
  }, 1000)
}

const completeExercise = (id: number) => {
  const plan = plans.value.find(p => p.id === id)
  if (plan) {
    plan.progress = 100
    showToast(t('rehabilitation.completeSuccess'))
  }
}
</script>

<style lang="scss" scoped>
.rehabilitation-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.rehabilitation-content {
  padding: 16px;
}

.plan-card {
  margin-bottom: 16px;
}

/* DepartmentSelect.css */
.department-container {
  background: #f7f9fa;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.back-icon {
  font-size: 22px;
  color: #333;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

.action-icons {
  display: flex;
  align-items: center;
}

.more-icon,
.qrcode-icon {
  font-size: 20px;
  margin-left: 16px;
  color: #333;
}

.search-container {
  padding: 12px 16px;
  background: #fff;
}

.search-input {
  border-radius: 20px;
  background: #f2f2f2;
}

.search-icon {
  color: #999;
}

.main-content {
  flex: 1;
  overflow: hidden;
}

.department-sider {
  background: #f7f9fa !important;
  border-right: 1px solid #eee;
  overflow-y: auto;
}

.department-item {
  padding: 16px 12px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.department-item.selected {
  background: #e6f0ff;
  color: #1677ff;
  font-weight: 600;
  border-left: 4px solid #1677ff;
}

.department-content {
  background: #f7f9fa;
  padding: 16px;
  overflow-y: auto;
}

.sub-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.sub-list {
  background: #fff;
  border-radius: 8px;
}

.sub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
}

.arrow {
  color: #ccc;
  font-size: 18px;
}
</style>